<!DOCTYPE html>
<html>
<!-- 曾浩南 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文章管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px">
        <button class="layui-btn layui-btn-normal" data-target="../view/articleManagement/addArticleManagement.html">
            <a href="../view/articleManagement/addArticleManagement.html">添加文章</a>
        </button>
        <input type="text" id="txtCont" required lay-verify="required" placeholder="关键字查询" style="width: 300px; height: 25px; margin-left: 50px;">
        <!-- //搜索按钮 -->
        <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" lay-submit="" lay-filter="" id="btn_search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <!-- //搜索按钮 -->

        <table id="table" lay-filter="tab"></table>
    </div>
    <script src="../js/lodash.min.js"></script>
    <script src="../layui/jquery-1.12.4.min.js"></script>
    <script src="../layui/layui.js"></script>

    <script>

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: "#table",
                url: "/api/Article",
                page: true,//开启分页
                cols: [[ //表头
                    {
                        field: 'title',
                        title: '文章标题',
                    },
                    {
                        field: 'description',
                        title: '文章描述',
                    },
                    {
                        field: 'publishDate',
                        title: '发布日期',
                        sort: true,
                        templet: `<div>   {{=dateFormat(d.publishDate)}} </div>`
                    },
                    {
                        title: '操作',
                        templet:
                            `<div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm"  onclick="puts('{{d._id}}')">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" onclick="deletes('{{d._id}}',this)">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>`
                    },
                ]]
            });

        });
        // 传入时间对象转为自己想要的格式显示
        function dateFormat(date = new Date(), format = "y-m-d h:i:s") {
            if (typeof date == "string") {
                date = new Date(date);
            }
            const y = date.getFullYear(),
                m = _.padStart(date.getMonth() + 1, 2, "0"),
                d = _.padStart(date.getDate(), 2, "0"),
                h = _.padStart(date.getHours(), 2, "0"),
                i = _.padStart(date.getMinutes(), 2, "0"),
                s = _.padStart(date.getSeconds(), 2, "0")
            return format.replace("y", y).replace("m", m).replace("d", d).replace("h", h).replace("i", i).replace("s",
                s);
        }

        function deletes(id, btn) {
            layer.confirm('确定要删除吗?',
                {
                    icon: 3,
                    title: '删除',
                }, function (index) {
                    $.ajax({
                        url: "/api/Article/" + id,
                        method: "delete",
                    });
                    $(btn).parents("tr").remove();
                    layer.close(index);
                });
        }
        //修改
        function puts(id) {
            location.href = "../view/articleManagement/updateArticleManagement.html?id=" + id;
        }

        //查询
        $("#btn_search").click(function () {
            const key = $("#txtCont").val();
            layui.table.reload("table", {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1 //重新设置第一页
                }
            });
        })
    </script>
</body>

</html>